<template>
  <el-table v-loading="loading" :data="carList" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="详情id" align="center" prop="detailsId" />
    <!-- 商品图片列 -->
    <el-table-column label="商品图片" align="center" prop="brandLogo">
      <template #default="{ row }">
        <img :src="row.brandLogo" alt="商品图片" style="width: 50px; height: 50px;" />
      </template>
    </el-table-column>
    <el-table-column label="商品标题" align="center" prop="skuTitle" />
    <el-table-column label="商品单价" align="center" prop="skuPrice" />
    <el-table-column label="商品数量" align="center">
      <template #default="{ row }">
        <el-input-number v-model="row.detailsCount" @change="handleCountChange(row)" :min="1" :max="100" />
      </template>
    </el-table-column>
    <el-table-column label="商品总价" align="center" prop="detailsTotalMoney" />
  </el-table>
  总数量{{num}}
  总金额{{money}}
  <el-button>立即购买</el-button>

</template>

<script setup>
import {shopCarList} from "@/api/shopcar/shopcar.js";
import { useRouter } from 'vue-router'
const router=useRouter();
const carList = ref([]);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const num = ref(0); // 定义一个 num 变量来存储总数量
const money = ref(0); // 定义一个 num 变量来存储总数量
function getList() {
  shopCarList().then(response => {
    console.log(response)
    carList.value = response.data;
  });
}
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
  // 计算选中行的数量总和
  num.value = selection.reduce((total, item) => total + item.detailsCount, 0);
  money.value=selection.reduce((total, item) =>total +item.detailsTotalMoney, 0);
}
function handleCountChange(row){
  // 处理数量变化
  console.log("数量变化", row.detailsCount);
}
getList()
</script>

<style scoped lang="scss">

</style>